<template>
  <el-card shadow="never">
    <div slot="header">
      <el-button @click="$router.push({ name: 'moralityScheme' })">返回</el-button>
    </div>
    <el-steps
      finish-status="success"
      style="display:flex; justify-content: center;"
      :space="200"
      class="mb20"
      align-center
      :active="active"
    >
      <el-step title="基本信息"></el-step>
      <el-step title="基础项目"></el-step>
      <el-step title="加减分项目"></el-step>
      <el-step title="考评对象"></el-step>
      <el-step title="考评方案等级"></el-step>
      <el-step title="完成"></el-step>
    </el-steps>
    <el-card :style="active === 0 || active === 4 ? cardStyle  : ''" shadow="never">
      <div slot="header" class="clearfix" style="text-align: center">
        <span>{{ computedWord(active) }}</span>
      </div>
      <plan-form
        @targetMode="handleTargetMode"
        @listData="handleListData"
        @postData="handlePostData"
        @notSubmit="handleNotSubmit"
        v-show="active === 0"
        ref="planForm"
      />
      <second-transfer
        @notSubmit="handleNotSubmit"
        @postData="handlePostData"
        v-show="active === 1"
        ref="secondTransfer"
      />
      <third-transfer
        @notSubmit="handleNotSubmit"
        @postData="handlePostData"
        v-show="active === 2"
        ref="thirdTransfer"
      />
      <fourth-transfer
        @notSubmit="handleNotSubmit"
        @postData="handlePostData"
        v-show="active === 3"
        ref="fourthTransfer"
      />
      <grade-comp @postData="handlePostData" ref="gradeComp" v-show="active === 4" />
      <five-comp v-show="active === 5" ref="fiveComp" />
    </el-card>
    <div class="mt20" style="overflow: hidden">
      <el-button class="fl" type="primary" v-show="active > 0 && active < 5" @click="handlePre">上一步</el-button>
      <el-button class="fr" type="primary" v-show="active < 4" @click="handleNext">下一步</el-button>
      <el-button class="fr" type="primary" v-show="active === 4" @click="handleSubmit">提交</el-button>
    </div>
  </el-card>
</template>

<script>
import PlanForm from './Form'
import SecondTransfer from './SecondTransfer'
import ThirdTransfer from './ThirdTransfer'
import FourthTransfer from './FourthTransfer'
import FiveComp from './FiveComp'
import GradeComp from './GradeComp'
import { planUpdateAll } from '@/api/eval'
import { getSession, setSession, removeSession } from '@/utils/util'
import { planCreate, planUpdate } from '@/api/morality'

export default {
  components: {
    PlanForm,
    GradeComp,
    SecondTransfer,
    ThirdTransfer,
    FourthTransfer,
    FiveComp
  },
  data() {
    return {
      param: {
        moralityPlan: {},
        moralityPlanItemList: {},
        moralityPlanItemList1: {},
        moralityPlanTargetList: {}
        // evalPlanTargetList: {}
      },
      cardStyle: {
        width: '800px',
        margin: '0 auto'
      },
      secondArrData: [],
      active: 0,
      first: true,
      second: true,
      third: true,
      fourth: true,
      fifth: true,
      row: this.$route.params.row || getSession('moralitySchemeRow'),
      type: null
    }
  },
  async mounted() {
    console.log('moralitySchemeRow', this.row)
    if (this.row) {
      setSession('moralitySchemeRow', this.row)
      this.type = 'edit'
      this.$refs.secondTransfer.parSetArr(this.row.moralityPlanItemList)
      this.$refs.thirdTransfer.setArr(this.row.moralityPlanItemList1)
      this.$refs.fourthTransfer.setArr(this.row.moralityPlanTargetList)
      this.$refs.planForm.setObj(this.row)
      this.$refs.gradeComp.setArr(this.row.moralityPlanLevels)
    }
  },
  methods: {
    // 获取第一个表单选择的考评模块
    handleListData(arr) {
      this.secondArrData = arr
    },
    // 监听考评对象变化
    handleTargetMode(n) {
      this.$refs.fourthTransfer.getData(n)
    },
    // 提交事件处理
    async handleSubmit() {
      if (this.active === 4) {
        this.$refs.gradeComp.postData()
      }
      if (this.first && this.second && this.third && this.fourth && this.fifth) {
        let res = ''
        if (!this.type) {
          res = await planCreate(this.param)
        } else {
          // 编辑
          res = await planCreate(this.param)
        }
        if (res.state === '000000') {
          this.active = 5
        }
      }
    },
    computedWord(num) {
      let str = ''
      switch (num) {
        case 0:
          str = '考评方案基本信息'
          break
        case 1:
          str = '基础项目'
          break
        case 2:
          str = '加减分项目'
          break
        case 3:
          str = '考评对象'
          break
        case 4:
          str = '考评方案等级'
          break
        default:
          break
      }
      return str
    },
    handlePostData(bool, obj, num) {
      if (num === 1) {
        this.first = bool
        this.$set(this.param, 'moralityPlan', obj)
      } else if (num === 2) {
        this.second = bool
        let arr = []
        obj.map(j => {
          arr.push({ moralityItemId: j.key })
        })
        this.$set(this.param, 'moralityPlanItemList', arr)
        this.$refs.gradeComp.computeGrade(obj)
      } else if (num === 3) {
        this.third = bool
        this.$set(this.param, 'moralityPlanItemList1', obj)
      } else if (num === 4) {
        this.fourth = bool
        this.$set(this.param, 'moralityPlanTargetList', obj)
      } else if (num === 5) {
        console.log('5==============', obj)

        this.fifth = bool
        this.$set(this.param, 'moralityPlanLevelList', obj)
      }
    },
    handleNotSubmit(num) {
      if (num === 1) {
        this.first = false
      } else if (num === 2) {
        this.second = false
      } else if (num === 3) {
        this.third = false
      } else if (num === 4) {
        this.fourth = false
      } else {
        this.fifth = false
      }
    },
    handlePre() {
      this.active = this.active - 1
      if (this.active <= 0) {
        this.active = 0
      }
    },
    handleNext() {
      if (this.active === 0) {
        this.$refs.planForm.postData()
        // this.$refs.secondTransfer.setArr(this.secondArrData)
      }
      if (this.active === 1) {
        this.$refs.secondTransfer.postData()
      }
      if (this.active === 2) {
        this.$refs.thirdTransfer.postData()
      }
      if (this.active === 3) {
        this.$refs.fourthTransfer.postData()
      }
      if (this.first && this.second && this.third && this.fourth && this.fifth) {
        this.active += 1
        if (this.active >= 5) {
          this.active = 5
        }
      }
    }
  },
  destroyed() {
    removeSession('moralitySchemeRow')
    removeSession('moralityType')

    // removeSession('evaluateCreateType')
  }
}
</script>